<template>
  <view class="music-player" :class="{ 'player-expanded': isExpanded }">
    <view class="full-player" v-if="isExpanded">
      <!-- 添加状态栏占位 -->
      <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
      
      <view class="safe-content">
        <view class="player-header">
          <text class="now-playing">放松音乐</text>
          <uni-icons 
            type="closeempty" 
            size="20" 
            color="rgba(255, 255, 255, 0.8)"
            @tap="collapsePlayer"
          ></uni-icons>
        </view>
        
        <view class="player-content">
          <image 
            class="album-cover" 
            :class="{ 'rotating': isPlaying }"
            src="/static/default-album.png"
            mode="aspectFill"
          ></image>
          
          <view class="song-info">
            <text class="song-name">放松音乐</text>
            <text class="artist-name">轻音乐</text>
          </view>
          
          <view class="player-controls">
            <uni-icons 
              type="backward-filled" 
              size="36" 
              color="#fff"
              @tap="previousTrack"
            ></uni-icons>
            <uni-icons 
              :type="isPlaying ? 'pause-filled' : 'play-filled'" 
              size="48" 
              color="#fff"
              @tap="togglePlay"
            ></uni-icons>
            <uni-icons 
              type="forward-filled" 
              size="36" 
              color="#fff"
              @tap="nextTrack"
            ></uni-icons>
          </view>
        </view>
        
        <!-- 添加底部安全区域 -->
        <view class="safe-bottom"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MusicPlayer',
  data() {
    return {
      isExpanded: false,
      isPlaying: false,
      audio: null,
      statusBarHeight: 0 // 添加状态栏高度变量
    }
  },
  created() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    
    // 创建音频实例
    this.audio = uni.createInnerAudioContext()
    this.audio.src = '/static/music/relax.mp3' // 设置音频源
    
    // 监听播放结束
    this.audio.onEnded(() => {
      this.isPlaying = false
    })
  },
  beforeDestroy() {
    // 组件销毁前释放资源
    if (this.audio) {
      this.audio.destroy()
    }
  },
  methods: {
    expandPlayer() {
      this.isExpanded = true
    },
    collapsePlayer() {
      this.isExpanded = false
    },
    togglePlay() {
      if (this.isPlaying) {
        this.audio.pause()
      } else {
        this.audio.play()
      }
      this.isPlaying = !this.isPlaying
    },
    previousTrack() {
      // 上一曲逻辑
      uni.showToast({
        title: '已是第一首',
        icon: 'none'
      })
    },
    nextTrack() {
      // 下一曲逻辑
      uni.showToast({
        title: '已是最后一首',
        icon: 'none'
      })
    }
  }
}
</script>

<style>
.music-player {
  position: absolute;
  z-index: 100;
}

.full-player {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background: linear-gradient(160deg, #89C4F4 0%, #6E8CD5 100%);
  z-index: 999;
}

.status-bar {
  width: 100%;
  background: transparent;
}

.safe-content {
  height: calc(100vh - var(--status-bar-height));
  display: flex;
  flex-direction: column;
  padding: 0 40rpx;
}

.player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  margin-bottom: 30rpx;
}

.now-playing {
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
}

.player-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}

/* 添加底部安全区域 */
.safe-bottom {
  height: env(safe-area-inset-bottom);
  min-height: 40rpx;
}

.album-cover {
  width: 400rpx;
  height: 400rpx;
  border-radius: 200rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
}

.rotating {
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.song-info {
  text-align: center;
  margin-bottom: 60rpx;
}

.song-name {
  font-size: 36rpx;
  color: #fff;
  font-weight: 500;
  margin-bottom: 8rpx;
  display: block;
}

.artist-name {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  display: block;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 60rpx;
}

/* 适配 iPhone 刘海屏 */
@supports (padding-top: env(safe-area-inset-top)) {
  .status-bar {
    padding-top: env(safe-area-inset-top);
  }
}

/* 适配小屏设备 */
@media screen and (max-height: 700px) {
  .album-cover {
    width: 300rpx;
    height: 300rpx;
    border-radius: 150rpx;
  }
  
  .player-content {
    padding: 20rpx 0;
  }
  
  .song-info {
    margin-bottom: 40rpx;
  }
}
</style> 